<template>
	<view class="page1">
		<view class="content">
			<view class="bg">
				<view class="bgtit">
					<image src="../../static/zhuangtai.png" mode=""></image>
					
					<text v-if="dataList.orderState==1">待支付 </text>
					<text v-else-if="dataList.orderState==4">检测完成</text>
					<text v-else>进行中</text>
				</view>
				<view class="bgcontent">
					<view class="bgcontentTop" @click="dh">
						<view class="bgcontentTopC">
							<view class="xxx">
								<image src="../../static/wz.png" mode=""></image>
								<view class="tt">{{dataList.traderName}}</view>
							</view>
							<view class="xxx1">
								<image src="../../static/dhy.png" mode=""></image>
								<view class="xtt">导航</view>
							</view>
						</view>
						<view class="xbt">{{dataList.detectionAddress}}</view>
					</view>
					<view class="list">
						<view class="ddbh">联系人</view>
						<view>{{dataList.contacts}}</view>
					</view>
					<view class="list">
						<view class="ddbh">联系电话</view>
						<view>{{dataList.nickname}}</view>
					</view>
					<view class="list">
						<view class="ddbh">预约时间</view>
						<view>{{dataList.appointmentTime}}</view>
					</view>
				</view>
			</view>
			

			<view class="content-t-c" style="margin-top: 240rpx;">
				<view class="content-t-text" style="border: none;">
					<view class="titles">订单信息</view>
				</view>
				<view>
					<view class="list">
						<view class="ddbh">订单编号</view>
						<view>1234567890</view>
					</view>
					<view class="list">
						<view class="ddbh">VIN</view>
						<view>{{dataList.vin}}</view>
					</view>
					<view class="list">
						<view class="ddbh">品牌车系</view>
						<view>奥迪A6L</view>
					</view>
					<view class="list">
						<view class="ddbh">交易号</view>
						<view>{{dataList.transactionId}}</view>
					</view>
					<view class="list">
						<view class="ddbh">创建时间</view>
						<view>{{dataList.createTime}}</view>
					</view>
					<view class="list">
						<view class="ddbh">付款时间</view>
						<view>{{dataList.wxSuccessTime}}</view>
					</view>
				</view>
			</view>
		<view class="content-t-c">
				<view class="content-t-text" style="border: none;">
					<view class="titles">套餐信息</view>
				</view>
				<view class="tc">
					<view>{{dataList.reportName}}</view>
					<view>{{dataList.describes}}</view>
				</view>
				<view class="text">
					已付款¥{{dataList.totalAmount}}
				</view>
			</view>

		</view>
	
	</view>
</template>

<script>
	import API from "@/api/my.js"
	export default {
		data() {
			return {
					detectionOrderId:'',
					dataList:''
			};
		},
		onLoad(option) {
			console.log(option)
			this.detectionOrderId = option.detectionOrderId;
			this.addDataList();
		},
		methods: {
			ckgd(){
				uni.navigateTo({
				    url: '/pagesB/carService/carService'
				});
			},
			addDataList(){
				let data  = {
					detectionOrderId:this.detectionOrderId
				}
				API.detectionOrderDetail(data).then(res=>{
					var str = res.data.appointmentTime;
					var times = ''
					if(str.substring(str.length-2)=='am'){
						times = '上午 09:00-12:00'
					}else{
						times = '下午 01:00-05:00'
					}
					this.dataList = res.data;
					this.dataList.appointmentTime = str.substring(0,str.length-3)+times;
				})
			},
			dh(){
				
				let that = this;
				wx.getLocation({
					type: 'gcj02',
					success(res) {
						
						const latitude = res.latitude
						const longitude = res.longitude
						const speed = res.speed
						const accuracy = res.accuracy
						wx.openLocation({
							latitude: Number(that.dataList.lat), //纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系
							longitude: Number(that.dataList.lng), //	经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系
							storeName: that.dataList.traderName, //这块市你坐标值的目的地 名字也可以自定义
							address: that.dataList.storeAddress, //这块市地址的详细描述可以自定义
							success: function() {
								console.log('成功的回调success');
							}
						});
				
				
					},
					fail(error) {
						wx.showModal({
							title: '温馨提示',
							content: '小程序将获取您的授权用来显示位置信息',
							success(res) {
								if (res.confirm) {
									console.log('点击了确认');
									wx.openSetting({
										success(res) {
											console.log(res.authSetting)
											res.authSetting = {
												"scope.userInfo": true,
												"scope.userLocation": true
											}
										}
									})
								} else {
									console.log('点击了取消')
								}
							}
						})
				
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page1{
		background: #f9f9f9;
	}
	.xxx,.xxx1{
		display: flex;
		
	}
	.bgcontentTopC{
		display: flex;
		justify-content: space-between;
		image:nth-child(1){
			width: 31rpx;
			height: 32rpx;
		}
		image:nth-child(2){
			width: 24rpx;
			height: 32rpx;
		}
		.tt{
			font-size: 30rpx;
			color: #2C2C2C;
			margin-left: 20rpx;
		}
		.xtt{
			font-size: 28rpx;
			color: #FD7E6E;
			margin-left: 12rpx;
		}
	}
	.bgcontentTop{
		height: 129rpx;
		margin: 36rpx 32rpx 0;
		border-bottom: 1px solid #EFEFEF;
	}
	.bg{
		// width: 750rpx;
		height: 413rpx;
		background: #002B56;
		position: relative;
		.bgtit{
			display: flex;
			text-align: center;
			font-size: 30rpx;
			height: 32rpx;
			line-height: 32rpx;
			width: 180rpx;
			margin: auto;
			color: #fff;
			padding: 51rpx 0;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.bgcontent{
			width: 686rpx;
			// height: 444rpx;
			padding-bottom: 20rpx;
			border-radius: 32rpx;
			background: #fff;
			position: absolute;
			top: 134rpx;
			left: 32rpx;
		}
	}
	
	input {
		height: 88rpx;
		line-height: 88rpx;
	}
	.content-t-bottom {
		font-size: 24rpx;
		color: #FD7E6E;
		background: #FFF2F1;
		margin-top: 32rpx;
		padding: 12rpx;
	}

	.content-t-text {
		display: flex;
		justify-content: space-between;
		height: 114rpx;
		line-height: 114rpx;
		border-bottom: 1px solid #EFEFEF;
	}
	.titles {
		font-size: 36rpx;
		color: #2C2C2C;
		padding: 0 32rpx ;
	}

	.text {
		font-size: 28rpx;
		padding: 32rpx;
		color: #FF552E;
		text-align: right;
	}

	.content {
		.content-t {
			margin: 0 32rpx;
			height: 275rpx;
			background: #fff;

			.content-t-text-smtit {
				font-size: 24rpx;
				color: #333333;
				margin-top: 32rpx;
			}

			.ckgd {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
				margin-top: 32rpx;

				image {
					width: 8rpx;
					height: 12rpx;
					margin-left: 10rpx;
				}
			}
		}
		.content-t-c {
			margin-top: 7rpx;
			margin: 0 32rpx 32rpx;
			// width: 750rpx;
			background: #fff;
			border-radius: 32rpx;


			
		}
	}
	
	.list{
		margin:0 32rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #2C2C2C;
		display: flex;
		border-bottom:1rpx solid #EFEFEF; 
		.ddbh{
			width: 121rpx;
			margin-right: 32rpx;
		}
	}
	
	.xbt{
		font-size: 24rpx;
		color: #999999;
		margin: 12rpx 84rpx;
	}
	.tc{
		margin:  0 32rpx;
		padding: 0  0 32rpx;
		border-bottom:1rpx solid #EFEFEF; 
		view:nth-child(1){
			font-size: 28rpx;
			color: #2C2C2C;
		}
		view:nth-child(2){
			font-size: 24rpx;
			color: #333333;
			margin-top: 12rpx;
		}
	}
</style>
